<template>
  <div id="container">
    账号：<input type="text" v-model="form.username" /> <br />
    密码：<input type="text" v-model="form.password" /> <br />
    <button type="button" @click="doLogin">登录</button>

    <button @click="req">请求后端（测试）</button>
  </div>
</template>

<script>
import { login } from "@/api/auth/auth.js";
import { getList } from "@/api/user/user.js";

export default {
  data() {
    return {
      form: {},
    };
  },
  methods: {
    req() {
      getList().then((r) => {
        console.log(r);
      });
    },
    doLogin() {
      // 收集数据 : this.form
      login(this.form).then((r) => {
        if (r.code == 200) {
          // 把登录成功的用户信息存入sessionStorage
          let loginUser = r.data;
          sessionStorage.setItem("userId", loginUser.userId);
          let u = sessionStorage.getItem("userId");
          //  设置用户权限树到Vuex中
          this.$store.dispatch("setUserPermissions");
          // 跳转到Home界面
          this.$router.push("/Home/");
        } else {
          this.$message.error("登录失败:" + r.msg);
        }
      });
    },
  },
};
</script>

<style scoped>
#container {
  width: 600px;
  margin: 100px auto auto auto;
  text-align: center;
}
</style>